<template>
  <div class="register">
	  <div class="header">
	  	  <div class="headerLeft" @click='goBack'><span class="iconfont">&#xe68b;</span></div>
	  	  <div class="headerMiddle">会员注册</div>
	  </div>
	  <div class="loginContent" >
	  	<div class="phone-login">
	  		<form action="">
	  			<ul>
	  				<li>
	  					<span class="inputSpan">用户名：</span>
	  					<input type="tel" placeholder="请输入用户名" v-model="newUser.userName">
	  				</li>
	  				<li>
	  					<span class="inputSpan">密码：</span>
	  					<input type="password" placeholder="请输入密码" v-model="newUser.password">
	  				</li>
					<li>
						<span class="inputSpan">密码确认：</span>
						<input type="password" placeholder="请再次输入密码" v-model="newUser.password2">
					</li>
	  				<li>
	  					<input type="button" value="注册" @click="registerBtn">
	  				</li>
	  			</ul>
	  		</form>
	  	</div>
	  </div>
	  <div class="errorLogin" v-if='isError'>
	  	<div class="errorInfor">
	  		<div class="errortop">{{isErrorInfor}}</div>
	  		<div class="errorbottom" @click='isShowErrorLogin'>确定</div>
	  	</div>
	  </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'register',
  components:{

  },
  data(){
	  return{
		  newUser:{
			  userName:'',
			  password:'',
			  password2:'',
		  },
		  isError:false,
		  isErrorInfor:''
	  }
  },
  methods:{
	  goBack(){
		  this.$router.go(-1)
	  },
	  registerBtn(){
		  if(this.newUser.userName.trim()===''||this.newUser.password.trim()===''||this.newUser.password2.trim()===''){
			  this.isError=true
			  this.isErrorInfor='用户名或密码不能为空'
		  }else{
			  if(this.newUser.password.trim()===this.newUser.password2.trim()){
				  let user=this.newUser
				  delete user.password2
				  let newUser=JSON.stringify(user)
				  //this.setWebSQL(1,newUser)
				  this.$router.push('/loginPage')
				  //this.getWebSQL()
			  }else{
				  this.isError=true
				  this.isErrorInfor='两次输入的密码必须一致'
			  }
		  }
	  },
	  isShowErrorLogin(){
	  		  this.isError=false;
	  },
	  /* setWebSQL(e_id,e_log){
		  var db = openDatabase('LoginDB', '1.0', 'Login', 2 * 1024 * 1024);
		  db.transaction(function (tx) {  
				tx.executeSql('CREATE TABLE IF NOT EXISTS LoginDB (id unique, log)');
				tx.executeSql('INSERT INTO LoginDB (id,log) VALUES (?, ?)', [e_id, e_log]);
		  });
		}, */
  },
  mounted(){
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang='stylus' scoped>
.register
	position:absolute
	top:0
	bottom:0
	width:100%
	background:#fff
	.errorLogin
		position:absolute
		top:0
		width:100%
		bottom:0
		background:rgba(0,0,0,0.5)
		.errorInfor
			width:70%
			margin:0 auto
			text-align:center
			margin-top:6rem
			font-size:0.35rem
			background:#fff
			height:2rem
			border-radius:0.1rem
			.errortop
				border-bottom:1px solid #ccc
				padding:0.35rem 0
			.errorbottom
				margin-top:0.3rem
				color:rgb(9, 163, 255)
	.header
		width:100%
		display:flex
		padding:0.25rem
		box-sizing:border-box
		border-bottom:1px solid #ddd
		.headerLeft
			float:left
			font-weight:bold
			color:#31c2b2
		.headerMiddle
			flex:1
			text-align:center
			font-size:0.35rem
			font-weight:bold
	.loginContent
		width:100%
		.normal-login
		.phone-login
			width:90%
			margin:0 auto
			ul
				li
					border-bottom:1px solid #ddd
					overflow:hidden
					position:relative
					.inputSpan
						position:absolute
						width:1.8rem
						left:0
						top:50%
						transform: translateY(-50%)
						font-size:0.35rem
					input
						width:100%
						padding:0.4rem 0
						font-size:0.4rem
						margin-left:1.8rem
					.phone_yanzhengma
						position:absolute
						right:0
						top:50%
						transform: translateY(-50%)
						font-size:0.3rem
					.iconfont
						position:absolute
						right:0 
						top:50%
						transform: translateY(-50%)
						font-size:0.5rem
				li:last-child
					border-bottom:none
					input
						margin:0.3rem 0
						padding:0.2rem 0
						background:#ff5346;
						color:#fff
						font-weight:bold
</style>
